<template>
	<view class="content">
		<view class="title_content">
			<!-- 城市信息 -->
			<navigator class="area_name" url="../city/city">
				{{address}}
			</navigator>
			<image class="downIcon" src="/static/images/down.png" />
			<!-- 用户头像 -->
			<navigator class="user" url="../user/user">
				<image class="user_img" src="/static/images/people.png" />
			</navigator>
		</view>

		<!-- 目录 -->
		<view class="menu_content">
			<view class="menu_item" @click="filterClassify('美食')">
				<image src="/static/images/eat.png" />
				<text>美食</text>
			</view>
			<view class="menu_item" @click="filterClassify('KTV')">
				<image src="/static/images/ktv.png" />
				<text>KTV</text>
			</view>
			<view class="menu_item" @click="filterClassify('足疗/按摩')">
				<image src="/static/images/foot.png" />
				<text>足疗/按摩</text>
			</view>
			<view class="menu_item" @click="filterClassify('酒店')">
				<image src="/static/images/hotel.png" />
				<text>酒店</text>
			</view>
			<view class="menu_item" @click="filterClassify('丽人/美发')">
				<image src="/static/images/improve.png" />
				<text>丽人/美发</text>
			</view>
		</view>

		<!-- 分割线 -->
		<view class="line_gray"></view>

		<view v-if="empty" class="empty">
			<text>暂无数据，敬请期待... ...</text>
		</view>

		<!-- 商铺列表 -->
		<List v-else title="猜你喜欢" :shops="shops" :loading="loading"  />


	</view>
</template>

<script>
	import List from "../../components/List.vue"
	import bmap from "../../libs/bmap-wx.js"

	/*  逆地址解析：
		http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/getlocation
	*/
	const BMap = new bmap.BMapWX({
		ak: 'Kv5xKniLNAzZbGH6ceAUOdKStDjFf1L4'
	});

	const {
		globalData
	} = getApp(); // 获取全局变量
 
	const db = wx.cloud.database();

	export default {
		page: 0,
		loadMore: true,
		classify: "",



		data() {
			return {
				address: globalData.address ?? '加载中...', // 左侧值为 null 或 undefined时，返回右侧值
				loading: false,
				shops: [],
				empty: true
			}
		},

		components: {
			List
		},

		/* 页面生命周期函数 */
		// 1. 监听页面加载 onload
		onLoad() {
			/* 获取用户信息 */
			this.getUserInfo().then(userInfo => {
				globalData.userInfo = userInfo; // 存入全局变量
			});

			/* 获取小程序用户的唯一身份标识 openid */
			const openid = uni.getStorageSync('openid');
			if (!openid) {
				this.getOpenId().then(openid => {
					uni.setStorageSync('openid', openid) // 本地存储
				})
			};
		},

		// 2. 监听页面显示 onshow
		onShow() {
			/* 获取用户位置信息 */
			if (!globalData.address) {
				this.getUserLocation().then(res => {
					return this.inverseAddressResolution(res);
				}).then(res => {
					this.address = res.city;
					globalData.address = res.city;
					// 获取店铺数据 
					this.updateShops();
				})
			} else {
				this.address = globalData.address;
				this.$options.page = 0;
				this.shops = [];
				this.updateShops();
			}
		},

		// 3. 页面滚到底部事件
		onReachBottom() {
			// console.log("到底了")
			if (this.$options.classify) {
				this.$options.loadMore && this.updateShops({
					classify: this.$options.classify,
					place: globalData.address
				})
			} else {
				this.$options.loadMore && this.updateShops();
			}
		},


		methods: {
			getUserInfo() {
				return new Promise(resolve => {
					// 获取用户授权信息
					uni.getSetting({
						// 成功后的回调
						success(res) {
							// console.log(res)
							if (res.authSetting['scope.userInfo']) {
								uni.getUserInfo({
									success(res) {
										resolve(res.userInfo)
									}
								})
							}
						}
					})
				})
			},

			getOpenId() {
				return new Promise(resolve => {
					wx.cloud.callFunction({ // 调用云函数
						name: 'login',
						success(res) {
							// console.log(res)
							resolve(res.result.openid)
						}
					})
				})
			},

			/* 获取经纬度 */
			getUserLocation() {
				return new Promise(resolve => {
					uni.getLocation({
						success(res) {
							resolve({
								longitude: res.longitude,
								latitude: res.latitude,
							})
						}
					})
				})

			},
			/* 地址逆解析 */
			inverseAddressResolution({
				longitude,
				latitude
			}) {
				return new Promise(resolve => {
					BMap.regeocoding({
						longitude,
						latitude,
						success(res) {
							resolve(res.originalData.result.addressComponent)
						}
					})
				})
			},

			/* 获取店铺数据 */
			getShops(condition) {
				return new Promise(resolve => {
					this.loading = true;

					const num = 4;
					let start = this.$options.page * num;

					db.collection('shopList')
						.where(condition)
						.skip(start)
						.limit(num)
						.get()
						.then(res => {
							this.loading = false;
							resolve(res.data)
						});
				})
			},
			/* 对获取到的数据进行处理 */
			parseData(data) {
				data.forEach(item => {
					item.label ? item.labelArr = item.label.split(',').slice(0, 4) : item.labelArr = null;
					if (!item.image_path) {
						item.image_path = 'mdata/img/404.jpg';
					}
				})
			},
			/* 更新店铺数据 */
			updateShops(condition = {
				place: globalData.address
			}) {
				this.getShops(condition).then(data => {
					if (data.length) {
						this.empty = false;
						this.parseData(data);
						this.shops.push(...data);
						this.$options.page++;
					} else {
						// console.log("over")
						this.$options.loadMore = false;
					}
				});
			},

			filterClassify(classify) {
				this.$options.classify = classify;
				let condition = {
					classify,
					place: globalData.address
				};
				this.shops = [];
				this.$options.page = 0;
				this.$options.loadMore = true;
				this.empty = true;
				this.updateShops(condition);
			}
		}
	}
</script>

<style>
	.title_content {
		width: 750rpx;
		height: 80rpx;
		background-color: #00acec;
		color: #FFFFFF;
		font-size: 24rpx;
		padding-top: 24rpx;
	}

	.area_name {
		float: left;
		margin: 0 9rpx 0 36rpx;
	}

	.downIcon {
		width: 18rpx;
		height: 10rpx;
	}

	.user {
		float: right;
		margin-right: 28rpx;
	}

	.user_img {
		width: 48rpx;
		height: 48rpx;
	}

	.menu_content {
		width: 750rpx;
		height: 198rpx;
		display: flex;
		flex-direction: row;
	}

	.menu_item {
		flex: 1;
		text-align: center;
	}

	.menu_item image {
		width: 88rpx;
		height: 88rpx;
		margin: 20rpx 20rpx;
	}

	.menu_item text {
		font-size: 24rpx;
	}

	.empty {
		margin-top: 30%;
		color: #515B67;
		text-align: center;
	}
</style>
